前言

淺談 CSR、SSR 與 SSG的文中有提到，採用 SSR + SPA，將第一個畫面透過 SSR 產生，其他就交給 CSR 來做處理，既能兼具 SEO 還能擁有 SPA 的使用者體驗，不是很完美嗎？沒有錯，但在沒有任何框架輔助之下，同一個頁面你可能就需要實作兩次程式碼，也就是前後端各一次的渲染邏輯，這也就是相應的代價。在介紹 Nuxt 3 之前就稍微提一下 Isomorphic JavaScript 與 Universal JavaScript。

Isomorphic JavaScript 與 Universal JavaScript

Isomorphic JavaScript

隨著 Node.js 的出現，讓客戶端瀏覽器之外的伺服器也能執行 JavaScript 程式碼，使得 JavaScript 成為一種同構語言 (Isomorphic Language)。Isomorphic JavaScript 即稱之為同樣的 JavaScript 程式碼可以在客戶端及伺服器端運行；也就是說同一份 Code 除了能在前端瀏覽器也能在後端執行。

然而 Isomorphic JavaScript 與 Universal JavaScript 的名詞存有一些爭議與差異，如今，Isomorphic JavaScript 多以稱相同的程式碼元件，可以在客戶端與伺服器端用來組裝或渲染出頁面的技術。

Universal JavaScript

Michael Jackson 的文章提到，Isomorphic 這個詞的含義「corresponding or similar in form and relations」為兩個實體不相同，但具有相似的操作或對應的關係，換句話說就是，兩個看起來不一樣的使用方法或語法，但最終的執行結果是一樣的，例如 jQuery 或 Zepto 操作 DOM 的語法長的不大一樣，但是最終也都是對應 JavaScript 的 document.querySelector 等方法。

所以說，為了描述相同的程式碼但能在不同環境中運行的名詞，就有了 Universal JavaScript 一詞，這個名字告訴人們 JavaScript 它不僅可以在服務器和瀏覽器上運行，還可以在本機設備和嵌入式架構上運行。

那麼 Isomorphic JavaScript 和 Universal JavaScript 與我們又有什麼關係呢？有的，因為 Nuxt 3 正是一個 Isomorphic JavaScript 框架，Nuxt 3 是目前你使用 Vue 3 在開發網站時，會需要採用 SSR 技術或優化 SEO 問題所可以使用的解決方案。

Nuxt 3

Nuxt 3 官方在 2022/11/16 正式發布穩定版本 Nuxt 3.0 stable。

Nuxt 3 官網的標語 The Intuitive Web Framework，Nuxt 3 將讓你更直覺的體驗混合渲染等新功能，讓在使用 Vue 3 開發時變得更加簡單！

Nuxt 3 的新特性

從 Nuxt 3 官網的提供訊息所列，簡單說明一下 Nuxt 3 的新特性，共有下列 12 個：

• Lighter: 更輕量，針對現在瀏覽器，伺服器部署與客戶端打包能減少最高 75 倍之多。
• Faster: 更快速，通過 Nitro 提供支持的動態伺服器端程式碼拆分來優化冷啟動問題。
• Hybird: 動態的靜態頁面生成和其他高級模式，現在這些都將成為可能。
• Suspense: 在導航觸發的前後，皆可以在任何元件中取得數據資料。
• Composition API: 使用 Composition API 和 Nuxt 3 的 Composables 實現真正的程式碼可重用性。
• Nuxt CLI: 全新的零依賴體驗，幫助你輕鬆建立專案與模組整合。
• Nuxt Dev Tools: 專屬開發除錯工具，提供更多的資訊與快速修復，讓工作更高效。
• Nuxt Kit: 具備基於 TypeScript 和跨版本兼容性的全新模組開發。
• webpack 5: 更快速的打包時間與打包出更小的體積，並且無需任何配置。
• Vite: 使用 Vite 作為打包工具，體驗閃電般快速的 HMR。
• Vue 3: 完全支持 Vue 3。
• TypeScript: 使用 TypeScript 與 ESM 構建而成，無需額外的配置步驟。

Nitro

Nuxt 3 由一個全新的伺服器引擎 Nitro 提供支持，它具有以下幾個特點：

• 跨平台支持，支持 Node.js 與瀏覽器等。
• Serverless 支持。
• API 路由，使用 unjs/h3。
• 自動程式碼拆分 (code-splitting) 與異步加載 chunk (async-loaded chunks)。
• 混合渲染模式，供靜態 (static)與無伺服器 (serverless) 網站。
• 開發伺服器上的 HMR (hot module reloading)。

簡單來說，Nitro 已經是 Nuxt 3 包含的全新伺服器引擎，無需再進行配置。Nitro 除了支援 SPA、建立靜態的網站，甚至能在後端打 API 時直接調用相關函數，從而降低 API Request，整體來說是非常強大的伺服器引擎。

Nuxt 3 渲染模式

Nuxt 3 目前支援兩種渲染模式，Client-side Only Rendering 與 Universal Rendering。之後將會推出更先近的渲染模式，混合渲染 (Hybrid Rendering) 與邊緣渲染 (Edge-Side Rendering)。

Client-side Only Rendering

Nuxt 3 設定為該模式，如同單純使用 Vue 3 建置出的 SPA，瀏覽器下載並載入完 Vue 程式碼後，渲染 HTML 的所有動作皆在客戶端執行，也就是客戶端渲染 CSR。

Universal Rendering

Universal Rendering 是 Nuxt 3 預設的渲染模式，在這個模式之下，無論頁面是預先產生並緩存還是動態渲染，Nuxt 都會在伺服器環境中執行 Vue 程式碼，並渲染 HTML，也就是如同 SSR，伺服器會向瀏覽器返回一個完整呈現的 HTML 頁面。當瀏覽器完整呈現的頁面出現後，也會開始載入 Vue 程式碼，以因應後續的動態頁面與路由跳轉等，即轉換為 SPA 開始由客戶端進行渲染。也就是說 Nuxt 3 的 Universal Rendering 即是指 SSR + SPA。

混合渲染 (Hybrid Rendering)

我們在使用 Vue 開發 SPA 網站時，通常是會設置路由 (Route) 讓網頁能夠到達不同的頁面再來請求資料，此為CSR。在使用 Nuxt 開發時能讓能網站擁有 SSR + SPA 的 Universal Rendering 渲染方式，除此之外，Nuxt 3 還提供了一種更先進的渲染模式——混合渲染 (Hybrid Rendering)，可以為每個路由設置不同的渲染與緩存的規則，讓部分頁面使用 CSR 在客戶端進行渲染，另一部分使用 SSR 在伺服器端進行渲染。

邊緣渲染 (Edge-Side Rendering)

Nitro 為 Nuxt 3 提供支持的全新伺服器端渲染引擎，它為 Node.js、Deno、Worker 等提供跨平台的支持，讓 Nuxt 可以在 CDN Edge Workers 進行渲染，故稱為邊緣渲染 (Edge-Side Rendering)，能有效分擔在伺服器端渲染時的資源負荷，將其提升到另一個層次，從而減少網路延遲及成本。

Nuxt 3 的建構工具

Nuxt 3 預設的建構工具如下：

• 預設使用 Vite 也可以切換成 webpack
• Rollup
• PostCSS
• esbuild

Nuxt 3 已經幫我們配置好一堆設定啦，真的是開箱即用，而且 Nuxt 也支援 TypeScript。如果說真的要調整配置，也可以再 nuxt.config 中進行調整，非常方便貼心。

小結

花了一些篇幅簡述 Nuxt 3 新功能特性及渲染模式，讓在使用 Nuxt 3 之前能有個概念，了解所使用的框架及特性也能幫助你更快掌握它。

接下來將開始建立第一個 Nuxt 3 專案，在這個系列文章所使用與提及的 Vue 與 Nuxt，皆會以 Vue 3 及 Nuxt 3 作為解釋說明與操作示範。

感謝大家的閱讀，這是我第一次參加 iThome 鐵人賽，請鞭小力一些，也歡迎大家給予建議 ：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

參考資料

• Universal JavaScript
• Is “Isomorphic JavaScript” a good term?
• Rendering on the Web